<template>
    <div class="face-page">
        <div class="main-menu" v-loading="loading">
            <div class="menu-top">
                <span class="iconfont iconleimupinleifenleileibie1">分类：</span>
                <el-menu :default-active="activeIndex1" class="el-menu-dem" mode="horizontal" @select="handleSelect1">
                  <el-menu-item :index="index.toString()" v-for="(item,index) in menuList1" :class="item.addClass">{{item.treeName}}</el-menu-item>
                </el-menu>
            </div>
            <div class="menu-top two-menu" v-show="menuShow">
                <span class="iconfont iconleimupinleifenleileibie1">分类：</span>
                <el-menu :default-active="activeIndex2" class="el-menu-dem" mode="horizontal" @select="handleSelect2">
                  <el-menu-item :index="index.toString()" v-for="(item,index) in menuList2">{{item.treeName}}</el-menu-item>
                </el-menu>
            </div>
            <!-- <div class="menu-top two-menu">

            </div> -->
            <div class="menu-bottom">
                <div class="item">
                    <span class="iconfont iconshoufei">收费类型：</span>
                    <el-menu :default-active="activeIndex3" :active="activeIndex3" class="el-menu-dem" mode="horizontal" @select="handleSelect3">
                      <el-menu-item :index="index.toString()" v-for="(item,index) in menuList3">{{item.name}}</el-menu-item>
                    </el-menu>
                </div>
<!--                <div class="item">
                    <span class="iconfont iconkecheng">课程类型：</span>
                    <el-menu :default-active="activeIndex4" :active="activeIndex4" class="el-menu-dem" mode="horizontal" @select="handleSelect4">
                      <el-menu-item :index="index.toString()" v-for="(item,index) in menuList4">{{item.name}}</el-menu-item>
                    </el-menu>
                </div> -->
            </div>
        </div>

        <div class="main-title"><span class="name1">热门课程</span></div>
        <div class="content-data" style="margin-bottom:50px" >
            <div class="course-item" v-for="(item,index) in courseList" :class="item.addClass" @click="goPage('dbcourse_content/'+item.id1)">
                <img :src="$axios.defaults.baseURL+item.photo" alt="">
                <span class="status">{{item.statusText}}</span>
                <span class="title">{{item.title}}</span>
                <div class="box">
                    <span class="money" v-show="Number(item.presentPrice)!=0">{{item.presentPrice}}</span>
                    <span class="money"  v-show="Number(item.presentPrice)==0">免费</span>
                    <span class="man iconfont iconwodeicon">{{item.buyCount}}</span>
                    <span class="number iconfont iconbofang2">{{item.watchCount}}</span>
                </div>
                <div class="box">
                    <!-- <span class="name">李老师</span> -->
                    <span class="time">开始时间:{{item.courseStartDate}}</span>
                </div>
            </div>
            <div class="nodata1" v-show="courseList.length==0 && start">暂无数据</div>
              <!-- <nodata style="padding: 0;width: 100%;height: 200px;" v-show="courseList.length==0 && start"></nodata> -->
            <div style="clear:both"></div>
        </div>

        <div class="main-title">
            <span class="name1">所有课程</span>
            <div class="sai sai1" style="width:430px;float:right">
                <div class="sai-item" v-for="(item,index) in saiList" >
                  <span class="name">{{item.name}}</span>
                  <div class="san">
                    <img @click="selectSai(item,index,!item.active)" width="20" :src="item.active ? require('../../assets/image/sort-up.png') : require('../../assets/image/sort-down.png')"/>
                  </div>
                </div>
            </div>
        </div>
        <div class="main-online">
            <div class="online-course" v-for="(item,index) in allList">
                <div class="img-box">
                    <img :src="$axios.defaults.baseURL+item.photo" alt="">
                    <span class="status">{{item.statusText}}</span>
                </div>
                <div class="right-box">
                    <span class="title-text">{{item.title}}</span>
                    <span class="teacher">{{item.educationTeacher.name}}</span>
                    <div class="rate-box">
                        <el-rate v-model="item.score" :colors="colors" :disabled="true" class="main-rate"></el-rate>
                        <span class="num">({{item.buyCount}}人学习)</span>
                        <div class="clear"></div>
                    </div>
                    <span class="price" v-show="Number(item.presentPrice)==0">免费</span>
                    <span class="price" v-show="Number(item.presentPrice)!=0">{{item.presentPrice}}</span>
                    <div class="button-box">
                        <div class="start" @click="goPage('dbcourse_content/'+item.id1)">马上学习</div>
                        <div class="time">开课时间:{{item.courseStartDate}}</div>
                        <div class="number">
                            <span class=" iconfont iconwodeicon">{{item.buyCount}}</span>
                            <span class=" iconfont iconbofang2">{{item.watchCount}}</span>
                        </div>
                    </div>
                </div>
              <div style="clear:both"></div>
            </div>
            <!-- <nodata v-show="allList.length==0 && start"></nodata> -->
            <div class="nodata1" v-show="allList.length==0 && start">暂无数据</div>
        </div>
        <ui-pagination class="study-pagination"  :total="total" @pageChange="pageChange" :size="8" v-show="courseList.length!=0"></ui-pagination>
    </div>
</template>

<script>

import Pagination from '@/components/pagination.vue'
import nodata from '@/components/nodata.vue'

export default {
    scrollToTop: true,
    components: {
        'ui-pagination':Pagination,
        nodata
    },
    data(){
        return{
            menuList1:[

            ],
            value2: 5,
            loading:false,
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            menuShow:false,
            start:false,
            saiList:[
                {name:'综合评分',active:false},
                {name:'更新时间',active:false},
                {name:'浏览量',active:false},
                {name:'学习人数',active:false},
            ],
            menuList3:[
                {name:'全部',id:''},
                {name:'免费',id:'0'},
                {name:"付费",id:'1'},
            ],
            menuList4:[
                {name:'全部',id:''},
                {name:'会员课程',id:'1,2'},
                {name:"普通课程",id:'3,4'},
            ],
            courseList:[],
            allList:[],
            menuList2:[],
            activeIndex3:'',
            activeIndex4:'',
            activeIndex2:'',
            activeIndex1:'',
            vipType:'',
            total:null,
            audio:{},
            type1:'',//课程分类
            type2:'',
            fs:'',//d倒序，a正序
            fee:'',
            paixu:'',
            pageNo:1,
            pageSize:16,
            priceFlag:'',//是否收费，0免费，1收费
            qualityFlag:'',//是否精品课程，0否，1是
        }
    },
    created(){
        this.getType('0');
        this.getList();
    },
    computed: {
        // swiper() {
        //   return this.$refs.mySwiper.swiper;
        // }
    },
    mounted(){

    },
    beforeDestroy(){

    },
    head() {
        return {
          title: '面授课程',

        }
    },
    methods:{
        goPage(url){
            this.$router.push(url);
        },
        goContent(item){
            this.$router.push("/dbcourse_content/"+"c52af770b4844f5f97d61360f7eebf47");
        },
        pageChange(index){
            this.pageNo = index;
            this.getList();
        },
        select(index){
            this.menuList.forEach((item,i)=>{
                if(i==index){
                    item.addClass = "active"
                }
                else{
                    item.addClass = ""
                }
            })
        },
        selectSai(item,index,sort){
            this.saiList.forEach((item1,i1)=>{
                if(index==i1){
                    var a = index+1;
                    this.paixu = a.toString();
                    item1.active = sort
                    sort ? this.fs = 'a':this.fs = 'd'
                    this.getList();
                }
                else{
                    item1.active = false
                }
            })

        },
        //一级菜单
        async handleSelect1(index){
          console.log(index,666666)
            if(this.menuList1[Number(index)].id!=""){
                console.log(this.menuList1[Number(index)].id,6666666666)
                await this.getType(this.menuList1[Number(index)].id);
            }
            else{
                this.type1 = '';
                this.menuShow = false;
                this.menuList2 = [];
            }
            // $(".two-menu .el-menu-item").removeClass("is-active");
            this.activeIndex2 = null;
            // this.type1 = this.menuList1[Number(index)].id;
            // this.type2 = "";
            this.getList();
        },
        //二级菜单
        handleSelect2(index){
            this.type1 = this.menuList2[Number(index)].id;
            this.getList();
        },
        handleSelect3(index){
            this.priceFlag = this.menuList3[Number(index)].id;
            this.getList();
        },
        handleSelect4(index){
            this.vipType = this.menuList4[Number(index)].id;
            this.getList();
        },
        pre(){
            console.log(this.swiper)
            this.$refs.mySwiper.swiper.slidePrev();
        },
        play(){
            this.audio.pause();
            this.audio.src = this.musicUrl;
            this.audio.play();
        },
        next(){
            this.$refs.mySwiper.swiper.slideNext();
        },
        change(index){
            this.musicUrl = this.imgList[index].audio;
        },
        getList(){
            let that = this;
            this.loading = true;
            this.$axios.$get("/f/coursePage?classifyId="+this.type1+"&paixu="+this.paixu+"&fs="+this.fs+"&pageNo="+this.pageNo+"&pageSize="+this.pageSize+"&priceFlag="+this.priceFlag+"&qualityFlag="+this.qualityFlag+"&courseType=4")
            .then(function (response) {

                that.start = true;
                let list = response.data.coursePage.list;
                let now = new Date().getTime();

                list.forEach((item,i)=>{
                    item.id1 = item.id;
                    item = Object.assign(item,item.courseInfo)
                    let start = new Date(item.validityStartDate).getTime();
                    let end = new Date(item.validityEndDate).getTime();
                    if(now>start && now<end){
                        item.statusText = "正在进行中"
                    }
                    else if(now<start){
                        item.statusText = "未开始"
                    }
                    else if(now>end){
                        item.statusText = "已结束"
                    }
                    //item.teacherName = item.educationTeacher.name;
                })
                that.allList = list;

                let list1 = response.data.courseRecPage.list;
                let arr = []

                list1.forEach((item,i)=>{
                    item.id1 = item.id;
                    item = Object.assign(item,item.courseInfo)
                    let start = new Date(item.validityStartDate).getTime();
                    let end = new Date(item.validityEndDate).getTime();
                    if(now>start && now<end){
                        item.statusText = "正在进行中"
                    }
                    else if(now<start){
                        item.statusText = "未开始"
                    }
                    else if(now>end){
                        item.statusText = "已结束"
                    }
                    if(i<4){
                        arr.push(item);
                    }
                    //item.teacherName = item.educationTeacher.name;
                })
                that.courseList = arr;
                // var num = that.courseList.length%4;
                // if(num!=0){
                //   var len1 = 4-num;
                //   for(var i=0;i<len1;i++){
                //       var obj={addClass:"none-shaow"};
                //       that.courseList.push(obj);
                //   }
                // }
                that.total = response.data.coursePage.count;
                that.loading = false;
                console.log(that.loading,5555555555)
            })
            .catch(function (error) {
                // handle error
                console.log(error);
                that.loading = false;
            })
        },
        async getType(id){
            let that = this;
            let obj = {
                id:'0'
            }
            await this.$axios.$get("/f/listCourseClassify?parentCode="+id)
            .then(function (response) {
                if(id=="0"){
                    let obj = {
                        treeName:'全部',
                        id:''
                    }
                    that.menuList1 = response.data;
                    that.menuList1.unshift(obj);
                    // that.type1 = '';
                }
                else{
                   that.type1 = id;
                   that.menuList2 = response.data;
                    if(that.menuList2.length!=0){
                        that.type1 = that.menuList2[0].id
                        that.menuShow = true;
                    }
                    console.log(that.type1,5555)
                }

            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
        },
    }
}
</script>

<style lang="less">
    .face-page{
        width:100%;
        background: #f4f4f4;
        // padding-bottom:100px;
        .nodata1{
          width: 100%;
          height: 80px;
          line-height: 80px;
          font-size: 18px;
          font-weight: bold;
          text-align: center;
        }
        .study-pagination{
            width:1250px;
            margin: 50px auto;
        }
        .content-data{
            width:1250px;
            margin:0 auto;

            justify-content: space-between;
            flex-wrap:wrap;

            .course-item{
                width:295px;
                background:#fff;
                margin-top:20px;
                padding-bottom:10px;
                cursor:pointer;
                float:left;
                margin-right:23px;
                position:relative;

                .status{
                    position:absolute;
                    right:0;
                    padding:6px 10px;
                    background:#3a7bf3;
                    top:15px;
                    font-size:14px;
                    color:#ffffff;
                }
                img{
                    width:100%;
                    height:170px;
                    display:block;
                }
                .title{
                    width:100%;
                    display:block;
                    margin-top:5px;
                    height:30px;
                    line-height:30px;
                    padding:0 12px;
                    box-sizing:border-box;
                    font-size:17px;
                    color:#444444;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .box{
                    width:100%;
                    box-sizing:border-box;
                    padding:0 12px;
                    height:30px;
                    .name{
                        line-height:30px;
                        float:left;
                        font-size:15px;
                        color:#444444;
                    }
                    .time{
                        line-height:30px;
                        float:left;
                        font-size:14px;
                        color:#888888;
                    }
                    .money{
                        line-height:30px;
                        font-size:22px;
                        color:#ff5924;
                        float:left;
                    }
                    .iconbofang2{
                        line-height:30px;
                        float:right;
                        font-size:14px;
                        margin-right:20px;
                        color:#4c87f4;
                    }
                    .iconbofang2:before{
                        margin-right:5px;
                    }
                    .iconwodeicon:before{
                        margin-right:5px;
                        font-size:18px;
                    }
                    .iconwodeicon{
                        line-height:30px;
                        float:right;
                        font-size:14px;
                        color:#ff541e;
                    }
                }
            }
            .course-item:nth-child(4n){
                margin-right:0;
            }
        }
        .main-online{
            width:1250px;
            margin:30px auto;
            box-sizing:border-box;
            border:1px solid #ebebeb;
            border-radius:3px;
            background:#ffffff;
            .online-course{
                width:100%;
                box-sizing:border-box;
                border-bottom:1px solid #ebebeb;
                padding:15px;
                .right-box{
                    width:calc(100% - 360px);
                    float:right;
                    position:relative;
                    .title-text{
                        font-size:22px;
                        color:#555555;
                        margin-top:10px;
                        line-height:30px;
                        display:block;
                    }
                    .teacher{
                        display:block;
                        line-height:20px;
                        font-size:14px;
                        color:#888888;
                        margin:10px 0;
                    }
                    .price{
                        font-size:26px;
                        margin-top:40px;
                        color:#3a7bf3;
                        display:block;
                    }
                    .button-box{
                      cursor: pointer;
                        position:absolute;
                        right:15px;
                        top:50%;
                        transform:translateY(-50%);
                        width:200px;
                        .number{
                            width:100%;
                            float:left;
                            height:20px;
                            .iconfont{
                                float:right;
                                line-height:20px;
                                display:block;
                                height:20px;
                                font-size:16px;

                            }
                            .iconfont:before{
                                margin-right:5px;
                            }
                            .iconbofang2{
                                color:#4c87f4;
                            }
                            .iconwodeicon{
                                color:#ff541e;
                                margin-left:10px;
                            }
                        }
                        .start{
                            width: 120px;
                            height: 36px;
                            color: #fff;
                            line-height: 36px;
                            text-align: center;
                            border-radius: 3px;
                            background: #3a7bf3;
                            font-size: 16px;
                            display: block;
                            float:right;
                        }
                        .time{
                            line-height:20px;
                            font-size:14px;
                            color:#777777;
                            display:block;
                            margin:15px 0;
                            float:left;
                            width:100%;
                            text-align:right;
                        }
                    }
                    .rate-box{
                        width:100%;
                        .num{
                            float:left;
                            line-height:20px;
                            color:#555555;
                        }
                    }
                    .main-rate{
                        width:125px;
                        float:left;
                        .el-rate__icon{
                            font-size:22px;
                            margin-right:2px;
                        }
                    }
                }
                .img-box{
                    width:330px;
                    height:185px;
                    float:left;
                    position:relative;
                    margin-right:20px;
                    .status{
                        position:absolute;
                        right:0;
                        padding:6px 10px;
                        background:#3a7bf3;
                        top:15px;
                        font-size:14px;
                        color:#ffffff;
                    }
                    img{
                        width:330px;
                        height:185px;
                        display:block;

                    }
                }

            }
            .online-course:last-child{
                border:0;
            }
        }
        .main-title{
            height:50px;
            font-size:20px;
            width:1250px;
            margin:0px auto;
            .name1{
                line-height:50px;
                padding:0 5px;
                height:50px;
                display:block;
                font-size:20px;
                float:left;
                color:#666666;
                border-bottom:3px solid #2478d2;
            }
        }
        .sai{
        width: 1250px;
        margin:0 auto;
        height: 50px;
        background: #fff;
        margin-bottom:20px;
        .sai-item{
          height:20px;
          float:left;
          margin-left:20px;
          margin-top:15px;
          .san{
            width:15px;
            height:100%;
            float:left;
            .iconsj-small-up{
              display:block;
              width:100%;
              height:9px;
              text-align:center;
              line-height:9px;
              font-size:10px;
              color:#fff;
              background:#2478d2;
              cursor:pointer;
            }
            .icontriangle-down{
              display:block;
              width:100%;
              height:9px;
              text-align:center;
              line-height:9px;
              font-size:10px;
              color:#fff;
              margin-top:2px;
              background:#2478d2;
              cursor:pointer;
            }
           .fill-active{
            color:#1676cc;
           }
          }
          .name{
            line-height:20px;
            font-size:16px;
            color:#444444;
            margin-right:7px;
            float:left;
          }
        }
      }
       .main-menu{
        margin:0 auto;
        width:1250px;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
        border: 1px solid rgba(34,36,38,.15);
        box-sizing: border-box;
        overflow: hidden;
        color: #666666;
        margin-bottom:25px;
        margin-top:20px;
        background:#ffffff;
        border: 0;
        .el-menu-item{
          padding:0 15px !important;
          margin-right:10px !important;
          font-weight: 500 !important;
          border:0 !important;
        }
        .el-menu-item:focus{
          color:#10aada !important;
          background:#e5f7fd !important;
        }
        .el-menu-item:hover{
          color:#f5911e !important;
        }
        .menu-top{
            height: 50px;
            padding: 0 20px;
            box-sizing: border-box;
            border-bottom: 1px #ccc dashed;
            overflow:hidden;
            span{
                line-height: 50px;
                float: left;
                font-size:15px;
            }
            .iconleimupinleifenleileibie1:before{
                margin-right:5px;
                font-size:16px;
            }
            .el-menu-dem{
                float: left;
                margin: 0;
                background: rgba(0,0,0,0);
                height:30px;
                margin-top:10px;
                border:0;
                .el-menu-item.is-active:hover,.el-menu-item.is-active:focus{


                }
                .el-menu-item.is-active{
                    color:#4d81f2 !important;
                    border-bottom:0;
                }
                li{
                    line-height: 30px;
                    background: rgba(0,0,0,0);
                    height: 30px;
                    color: #f5911e;
                    border-radius:0 !important;
                    position:relative;
                    font-size: 15px;
                    span{
                        position: absolute;
                        right: -7px;
                        line-height: 54px;
                        font-size: 15px;
                        color:#f5911e !important;
                    }
                }

            }
        }
        .menu-bottom{
            height: 50px;
            padding: 0 20px;
            overflow:hidden;
            .iconkecheng:before{
                margin-right:5px;
            }
            .iconshoufei:before{
                margin-right:5px;
            }
            .item{
                width:50%;
                height:100%;
                float:left;
            }
            span{
                line-height: 50px;
                float: left;
                font-size:15px;
            }
            .el-menu-dem{
                float: left;
                margin: 0;
                margin-top:10px;
                height:30px;
                background: rgba(0,0,0,0);
                border:0;
                .el-menu-item.is-active:hover,.el-menu-item.is-active:focus{


                }
                .el-menu-item.is-active{
                    color:#4d81f2 !important;
                    border-bottom:0;
                }
                li{
                    line-height: 30px;
                    background: rgba(0,0,0,0);
                    height: 30px;
                    color: #f5911e;
                    border-radius:0 !important;
                    position:relative;
                    font-size: 15px;
                    span{
                        position: absolute;
                        right: -7px;
                        line-height: 54px;
                        font-size: 15px;
                        color:#f5911e !important;
                    }
                }
            }
        }
      }
    }
</style>
